<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <!-- EasyUI样式 -->
    <link type="text/css" rel="stylesheet" href="../../topjui/themes/default/easyui.css">
    <!-- TopJUI样式 -->
    <link type="text/css" rel="stylesheet" href="../../topjui/css/topjui.all.min.css">
    <!-- TopJUI配置 -->
    <script type="text/javascript" src="../../topjui/js/topjui.config.js"></script>
    <!-- jQuery核心 -->
    <script type="text/javascript" src="../../topjui/plugins/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../../topjui/plugins/jquery/jquery.cookie.js"></script>
    <!-- EasyUI核心 -->
    <script type="text/javascript" src="../../topjui/plugins/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../topjui/plugins/easyui/easyui-lang-zh_CN.js"></script>
    <!-- TopJUI框架 -->
    <script type="text/javascript" src="../../topjui/js/topjui.all.js"></script>
</head>

<body>

<!-- layout布局 开始 -->
<div class="easyui-layout" data-options="fit:true">

    <div data-options="region:'center',iconCls:'icon-reload',title:'',fit:false,split:true,border:false,bodyCls:'border_left_right'">
        <!-- datagrid表格 -->
        <table data-toggle="topjui-datagrid"
               data-options="id:'productDg',
               url:'../../json/product/list.json'">
            <thead>
            <tr>
                <th data-options="field:'id',title:'ID',checkbox:true"></th>
                <th data-options="field:'name',title:'商品名称'"></th>
                <th data-options="field:'code',title:'商品编号'"></th>
                <th data-options="field:'spec',title:'规格型号'"></th>
                <th data-options="field:'danwei',title:'规格型号'"></th>
                <th data-options="field:'sale_price',title:'销售单价'"></th>
            </tr>
            </thead>
        </table>
    </div>

    <div data-options="region:'east',iconCls:'icon-chart_pie',title:'',split:true,border:false,width:'40%',bodyCls:'border_left'">
        <div data-toggle="topjui-tabs" data-options="id:'eastTabs',fit:true,border:false,
				 tabs:[
				 	{type:'panel',id:'detail1Panel'},
				 	{type:'panel',id:'detail2Panel'}
				 ]">
            <div title="开发文档" data-options="id:'detail1Panel',iconCls:'icon-table',
            dynamicHref:'/system/article/detail?uuid={uuid}',
            parentGrid:{
                type:'datagrid',
                id:'articleDg',
                params:'uuid'
            }"></div>
            <div title="注意事项" data-options="id:'detail2Panel',iconCls:'icon-table',
            dynamicHref:'/system/article/print?uuid={uuid}',
            parentGrid:{
                type:'datagrid',
                id:'articleDg',
                params:'uuid'
            }"></div>
        </div>
    </div>

</div>
<!-- layout布局 结束 -->

<!-- 表格工具栏开始 -->
<div id="productDg-toolbar"
     data-options="grid:{
           type:'datagrid',
           id:'productDg'
       }" style="display:none">
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="clickEvent:'openDialog',
       dialog:{
           id:'userAddDialog',
           href:'/html/form/combotree.html',
           height:450,
           buttonsGroup:[
               {text:'保存',url:'/json/response/success.json',iconCls:'icon-add',handler:'ajaxForm'}
           ]
       }">树形下拉演示</a>
</div>

</body>
</html>